<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link type="text/css" rel="stylesheet" th:href="@{/css/layui.css}"/>-->
    <!--<link type="text/css" rel="stylesheet" th:href="@{/css/layer.css}"/>-->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        #container ul{
            margin-left:50px;
        }
        #container ul li{
            float: left;
            margin-left: 10px;
            list-style: none;
        }
    </style>
</head>
<body>
<form class="layui-form">
    <input type="hidden" th:value="${meter.meterID}" name="meterID">
    <div id="container">
        <ul>
            <li><div class="layui-form-item">
                <label class="layui-form-label">楼宇</label>
                <div class="layui-input-block">
                    <!--<input type="text" name="precinct"  th:value="${meter.precinct}"  class="layui-input">-->
                    <select th:name="precinct" id="precinct"  lay-filter="precinct">
                        <option th:each="q:${query}" th:value="${q.buildingName}" th:text="${q.buildingName}" th:selected="${q.buildingName==meter.precinct}"></option>
                    </select>
                </div>
            </div></li>
            <li><div class="layui-form-item">
                <label class="layui-form-label">房间编号</label>
                <div class="layui-input-block">
                    <!--<input type="text" name="homeNO" th:value="${meter.roomNO}"   class="layui-input">-->
                    <select th:name="homeNO"  lay-filter="RoomType" id="RoomType">
                        <option th:each="r:${room}" th:value="${r.roomID}" th:text="${r.roomNO}" th:selected="${r.roomID==meter.homeNO}" ></option>
                    </select>
                </div>
            </div></li>
        </ul>
        <ul>
            <li><div class="layui-form-item">
                <label class="layui-form-label">仪表编号</label>
                <div class="layui-input-block">
                    <input type="text" name="meterNO" th:value="${meter.meterNO}"   class="layui-input">
                </div>
            </div></li>
            <li><div class="layui-form-item">
                <label class="layui-form-label">客户姓名</label>
                <div class="layui-input-block">
                    <input disabled type="text" name="clientName" id="clientName"th:value="${meter.clientName}"   class="layui-input">
                </div>
            </div></li>
        </ul>
        <ul>
            <li><div class="layui-form-item">
                <label class="layui-form-label">仪表类型</label>
                <div class="layui-input-block">
                    <select th:name="payitemsId" >
                        <option th:each="l:${t}" th:value="${l.payitemsId}" th:text="${l.patitemsName}" th:selected="${l.payitemsId==meter.payitemsId}"></option>
                    </select>
                </div>

            </div></li>
            <li> <div class="layui-form-item">
                <label class="layui-form-label">抄表期</label>
                <div class="layui-inline">
                    <input type="text" name="meterReadTime" class="layui-input test-item"  th:value="${meter.meterReadTime}" >
                </div>
            </div></li>
        </ul>
        <ul>
            <li><div class="layui-form-item">
                <label class="layui-form-label">抄表结束期</label>
                <div class="layui-inline">
                    <input type="text" name="meterReadEndTime" class="layui-input test-item"  th:value="${meter.meterReadEndTime}" >
                </div>
            </div></li>
            <li><div class="layui-form-item">
                <label class="layui-form-label">上次指数</label>
                <div class="layui-input-block">
                    <input disabled type="text" name="lastIndex" id="lastIndex" th:value="${meter.lastIndex}"   class="layui-input">
                </div>
            </div></li>
        </ul>
        <ul>
            <li><div class="layui-form-item">
                <label class="layui-form-label">本次指数</label>
                <div class="layui-input-block">
                    <input type="text" name="atIndex" id="atIndex" th:value="${meter.atIndex}"   class="layui-input">
                </div>
            </div></li>
           <!-- <li><div class="layui-form-item">
                <label class="layui-form-label">附加量</label>
                <div class="layui-input-block">
                    <input type="text" name="additional" id="additional" th:value="${meter.additional}"   class="layui-input">
                </div>
            </div></li>-->
        </ul>
        <ul>
            <li><div class="layui-form-item">
                <label class="layui-form-label">实用量</label>
                <div class="layui-input-block">
                    <input type="text" name="utility" id="utility" th:value="${meter.utility}"  class="layui-input">
                </div>
            </div></li>
            <li><div class="layui-form-item">
                <label class="layui-form-label">抄表类型</label>
                <div class="layui-input-block">
                    <input type="text" name="meterReadType" id="meterReadType" th:value="${meter.meterReadType}"  class="layui-input">

                </div>
            </div></li>
        </ul>
        <ul>
            <!--<li><div class="layui-form-item">
                <label class="layui-form-label">抄表状态</label>
                <div class="layui-input-block">
                    <input type="text" name="meterReadStatus" id="meterReadStatus" th:value="${meter.meterReadStatus}"   class="layui-input">
                </div>
            </div></li>-->
            <li><div class="layui-form-item">
                <label class="layui-form-label">收费标准</label>
                <div class="layui-input-block">
                    <select th:name="payitemstId" >
                        <option th:each="p:${pt}" th:value="${p.payitemstId}" th:text="${p.patitemstName}" th:selected="${p.payitemstId==meter.payitemstId}"></option>
                    </select>
                </div>
            </div></li>
        </ul>
        <ul>
            <li><div class="layui-form-item">
                <label class="layui-form-label">抄表日期</label>
                <div class="layui-inline">
                    <input type="text" name="meterReadDate" class="layui-input test-item"  th:value="${meter.meterReadDate}"  >
                    <span class="testView"></span>
                </div>
            </div></li>
            <li><div class="layui-form-item">
                <label class="layui-form-label">抄表人</label>
                <div class="layui-input-block">
                    <input  type="text" name="meterReader" id="meterReader" th:value="${meter.meterReader}"  class="layui-input">
                </div>
            </div></li>
        </ul>
        <ul>
            <li><div class="layui-form-item  layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" id="remark"  placeholder="请输入内容" th:value="${meter.remark}" class="layui-textarea"></textarea>
                </div>
            </div></li>
        </ul>
    </div>


    <div style="margin-left: 210px;clear: both;">
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="tijiao" >提交</button>
    </div>
</form>
<script type="text/javascript" th:src="@{/js/layui.all.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-2.1.3.min.js}"></script>
<script>
    $("#atIndex").blur(function () {
        // $("#utility").val(parseInt($("#atIndex").val())-parseInt($("#lastIndex").val()));
        var lastNumber=parseInt($("#lastIndex").val());
        var currNumber=parseInt($("#atIndex").val());

        if(currNumber<lastNumber){
            layer.alert("指数有误请仔细核对！");
            $("#atIndex").val("");
        }else{
            $("#utility").val(currNumber-lastNumber);
        }
    });

</script>
<script type="text/javascript">
    layui.use(['form', 'layer', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,laydate = layui.laydate
            ,$=layui.jquery;
        //日期
        lay('.test-item').each(function(){
            laydate.render({
                elem: this
                ,format:'yyyy-MM-dd'
                ,type:'date'
                ,trigger: 'click'
            });
        });
        form.on('select(RoomType)', function(data){
            $.post("selMessageID",{'MessageID':data.value},function(result){
                    $("#clientName").val(result.msg);
                }
            );
            $.post("selMax",{'practicalID':data.value},function(result){
                    $("#lastIndex").val(result.count);
                }
            );

        });
        //监听提交
        form.on('submit(tijiao)', function(data){
            //data.field表单所有信息
            $.post("update_do",data.field,function(result)
                {
                    layer.msg(result.msg, {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        //刷新父页面
                        parent.window.location.reload();
                    });
                }
            );
            return false;
        });

    });
</script>

</body>
</html>